<template>
  <div class="app-container">
    <div class="row">
      <el-form :inline="true" :model="queryParams">
        <div class="float">
          <div>
            <el-form-item label="用户id">
              <el-input v-model="queryParams.userid" placeholder="搜索用户id" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="small"
                          @click="search">搜索
              </el-button>
              <el-button icon="el-icon-refresh" size="small" 
                          @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </div>
<!--        <div class="float">-->
<!--          <div>-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" size="mini"-->
<!--                         @click="showAdd">新增-->
<!--              </el-button>-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--        </div>-->
      </el-form>
    </div>

    <div class="row">
      <el-table :data="tableData" style="width: 100%" border v-loading="loading">
        <el-table-column label="序号" type="index" min-width="5%" width="100"/>
        <el-table-column prop="id" label="订单编号" width="100">
        </el-table-column>
        <el-table-column prop="userid" label="用户id" width="100"/>
        <el-table-column prop="stationid" label="充电桩id" width="100"/>
        <el-table-column prop="statu" label="状态" width="120"/>
        <el-table-column prop="start" label="开始时间" width="180"/>
        <el-table-column prop="end" label="结束时间" width="180"/>
        <el-table-column prop="money" label="订单金额" :formatter="moneyFormatter" width="150"/>
        <el-table-column label="操作" align="center">
          <template slot-scope='scope'>
<!--            <el-button type="primary" @click="update(scope.row)">修改</el-button>-->
<!--            <el-button type="danger" @click="deleted(scope.row)">删除</el-button>-->
            <el-button type="danger" @click="stop(scope.row)">强制结束</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange"
                   :current-page="page.currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>

    <el-dialog :visible.sync="addVisible" width="800px" :title="title">
      <el-form label-width="100px" :model="formData">
        <el-form-item label="标题" prop="title">
          <el-input maxlength="20" type="text" v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="notice">
          <el-input maxlength="200" type="text" v-model="formData.notice"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="statu">
          <el-input maxlength="16" type="text" v-model="formData.statu"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSubmit">确 定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script setup>
import axios from 'axios'

export default {
  name: "OrderManage",
  components: {},
  data () {
    return {
      addVisible: false,
      loading: false,
      title: '新增',
      tableData: [],
      formData: {},
      page: {
        //当前显示页
        currentPage: 1,
        //分页大小
        pageSize: 10,
        //总记录
        total: 0,
      },
      queryParams: {
        id: '',
      },
    }
  },
  created () {
    this.init()
  },
  methods: {
    resetQuery () {
      let arr = ['id']
      arr = arr.forEach(item => {
        this.queryParams[item] = null
      })
    },
    init () {
      this.loading = true
      axios.post('http://112.124.41.199:6112/csms/order/page', {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        id: this.queryParams.id
      }).then(res => {
        this.loading = false
        this.tableData = res.data.data
        this.page = {
          //当前显示页
          currentPage: res.data.pageNo,
          //分页大小
          pageSize: res.data.pageSize,
          //总记录
          total: res.data.count,
        }
        this.switchReload(res)
      }).catch(err => {
        this.$message.error(err)
      })
    },
    switchReload (res) {
      // 防止切换页码导致查询数据不显示bug
      if (this.page.currentPage !== 1 && res.data.data.length === 0) {
        this.page.currentPage = 1
        this.init()
      }
    },
    stop(row) {
      if (row && row.statu === '进行中') {
        axios.post('http://112.124.41.199:6112/csms/order/stop', {
          userid: row.userid,
        }).then(res => {
          if (res.data.success) {
            this.init()
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
          this.$message.error(err)
        })
      } else {
        this.$message.error('只有进行中的订单才能强制结束')
      }
    },
    showAdd() {
      this.addVisible = true
      this.title = '新增'
      this.formData = {}
    },
    update(row) {
      this.addVisible = true
      this.title = '修改'
      this.formData = row
    },
    deleted(row) {
      axios.post('http://112.124.41.199:6112/csms/order/deleted', {
        id: row.id,
      }).then(res => {
        if (res.data.success) {
          this.$message.success('删除成功')
          this.init()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    moneyFormatter(val) {
      return (val.money / 100).toFixed(2)
    },
    addSubmit() {
      axios.post('http://112.124.41.199:6112/csms/order/saveOrUpdate', this.formData).then(res => {
        if (res.data.success) {
          this.addVisible = false
          this.init()
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$message.error(err)
      })
    },
    search() {
      this.init()
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.page.currentPage = 1
      this.init()
    },
    handleCurrentChange (e) {
      this.page.currentPage = e
      this.init()
    }
  }
}
</script>

<style scoped>

.app-container >>> .el-table .cell {
  white-space: pre-line;
  text-align: center;
}

.app-container {
  background-color: white;
  margin: 20px 20px;

}

.app-container .el-table p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

.top-right-btn {
  float: none;
}

.el-table__fixed-right {
  height: 100% !important;
}

.row {
  margin-bottom: 15px;
  overflow: auto;
}

.el-pagination {
  margin-top: 15px;
}

.line {
  display: flex;
}

.el-input {
  margin-right: 15px;
}

.el-dialog {


}

.el-dialog p {
  margin: 10px 0;
}

.el-dialog p .el-dialog .table {
  overflow-x: auto;
}

.el-dialog p .tableList {
  display: flex;
}

.box {
  min-width: 190px;
  height: 150px;
  border: 1px solid #e5e5e5;
  margin-right: 15px;
  padding: 5px 10px;
  margin-bottom: 15px;
}

.float {
  display: flex;
  justify-content: space-between;
}
</style>
